<template>
    <div>
      <el-container height="700px" > 
          <!-- //头部 -->
          <el-header height="70px"> 
            <div style="margin-top: 20px;">
                <i class="el-icon-arrow-left" @click="$router.go(-1)"></i>
                </div> 
            
            <div style="text-align: center; font-size: 22px; margin-top: 20px;">我的地址</div>
          </el-header>
  
          <!-- //身体 -->
        <el-main>
              <!-- 本日业绩,本月业绩 -->
              <el-container>
                <el-col>
                    <el-button  style="margin-left:220px" type="info" @click="saveData"  round class="button" size="medium" >增加地址</el-button>
                  <!--地址的展示,增加,修改,删除 -->
                    <el-row>
                        <el-col  v-for=" a in addressList" :key="a.id" >
                            <el-card class="box-card"  body-style="padding:5px">
                                    <div style="padding: 14px;">
                                        <div style="font-size:13px">地址编号：{{ a.id }}
                                        </div> 
                                        <br>
                                        <div>客户电话:{{ a.phone }}</div>
                                        <br>
                                        <div>客户地址:{{a.address }}</div>
                                        <br>
                                        <div>创建时间:{{a.createTime}}</div>
                                        <br>
                                        <div class="bottom clearfix"  >
                                            <el-row >
                                          <el-col >
                                         <div style="margin-top:8px">    
                                           <el-button type="info" @click="updateData(a.id)"  round class="button" size="medium" >修改地址</el-button>
                                          <el-button type="info" @click="removeAddress(a.id)"  round class="button" size="medium" >删除地址</el-button>
                                           </div>  
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-col>
              </el-container>

                 <!-- 增加地址弹出框 -->
        <el-dialog title="增加地址"  :visible.sync="dialogFormInsert" width="70%">
        <el-form >
    <el-form-item label="地址"  label-width="50px">
       <el-input  v-model="address"></el-input>
    </el-form-item>
</el-form>
   <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormInsert = false">取 消</el-button>
    <el-button type="primary" @click="saveAddress">确 定</el-button>
  </div>
</el-dialog>


  <!-- 修改地址弹出框 -->
  <el-dialog title="修改地址"  :visible.sync="dialogFormUpdate" width="70%">
        <el-form >
    <el-form-item label="地址"  label-width="50px">
       <el-input  v-model="address"></el-input>
    </el-form-item>
</el-form>
   <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormUpdate = false">取 消</el-button>
    <el-button type="primary" @click="updateAddress">确 定</el-button>
  </div>
</el-dialog>
          </el-main>
  
          <!-- //尾部 -->
          
      <el-footer>
    </el-footer>
      </el-container>
    </div>
  </template>
  
  <script>
    
  export default {
      data(){
          return{
            id:'',
            address:'',
            addressList:[],
            dialogFormInsert:false,
            dialogFormUpdate:false
              
          }
      },
      methods:{
        //打开增加地址框
        saveData(){
           this.dialogFormInsert = true;
           this.address = '';
        },

        //添加地址
        saveAddress(){
          this.phone = sessionStorage.getItem("phone");
                let param={};
                param.phone = this.phone;
                param.address = this.address;
            this.$axios.post('/api/app/address/saveAddress',param)
            .then(res=>{
                console.log(res.data);  
                if(res.data.code == 200){
                this.$message("添加成功")
                 this.queryAllAddress();
                 this.dialogFormInsert = false;
            }
        });
        },

        updateData(id){
          this.dialogFormUpdate = true;
          this.id = id;
          this.address= '';

        },
        
        //修改地址
         updateAddress(){
            this.phone = sessionStorage.getItem("phone");
           this.$confirm('此操作将修改您的地址, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            center: true,
            type: 'warning'
            }).then(() => {
                let param1={};
                param1.id = this.id;
                param1.phone = this.phone;
                param1.address = this.address;
            this.$axios.post('/api/app/address/updateAddress',param1)
            .then(res=>{
                console.log(res.data);  
                if(res.data.code == 200){
                  this.queryAllAddress();
                  this.dialogFormUpdate = false;
                  this.$message({
                type: 'success',
                duration:2000,
                message: '修改地址成功!'
            });
             }
          });
                
          }).catch(() => {
            this.$message({
                type: 'info',
                message: '取消操作'
            })          
            });  
        },
       


        //删除地址
        removeAddress(id){
          let phone= sessionStorage.getItem("phone");
          this.$axios.get('api/app/address/removeAddress?id='+id+"&phone="+phone)
          .then(res =>{
            if(res.data.code == 200){
                this.$message("删除成功")
             this.queryAllAddress();
               
            }
          })

        },
        //查询用户所有地址
        queryAllAddress(){
        let phone = sessionStorage.getItem("phone");
         this.$axios.get('/api/app/address/queryAddressByPhone?phone='+phone)
        .then(res=>{
          console.log(res.data);
        if(res.data.code == 200){
           this.addressList = res.data.data;

        }
        })
        }

    },
      created(){     
        this.queryAllAddress();
      }
  }
  </script>
  
  <style>
  .el-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    flex-basis: auto;
    box-sizing: border-box;
    min-width: 0;
    background-color:rgba(246, 246, 246, 1)
  }
    .el-row{
      background-color: white;
      border-radius: 10px;
    }
  .box-card {
  
    width: 500px;
    height: 280px;
  }
    .textBtn{
      padding-left: 10px;
    }
    .el-icon-map-location{
      font-size: 20px;
      height: 20px;
      margin: 6px;
    }
    .sel{
      position:absolute;
      clip:rect(2px 90px 30px 2px);
      width:100px;
      height:10px;
      line-height:20px;
      font-size:20px;
      font-weight:bold;
    }
    .el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 10px 0px 0px 0px;
}
.el-select .el-input__inner {
    cursor: pointer;
    padding-right: 35px;
    background-color: #efefef;
}
.el-avatar>img {
    margin: 0px 0px 0px -5px;
}
  </style>